<template>
  <div class="page-layout-main" :class="className">
    <div class="page-layout-search" v-if="$slots.search">
      <slot name="search"></slot>
    </div>
    <div :class="$slots.extend ? 'page-layout-flex' : ''">
      <div v-if="$slots.extend" class="page-layout-extend">
        <slot name="extend"></slot>
      </div>
      <div class="page-layout-cnt">
        <div class="page-layout-prompt" v-if="promptTitle || $slots.operate">
          <div class="page-layout-prompt--h" v-if="promptTitle">
            {{ promptTitle }}
          </div>
          <div class="page-layout-prompt--opt" v-if="$slots.operate">
            <slot name="operate"></slot>
          </div>
        </div>
        <div class="page-layout-table">
          <slot></slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PageLayout',
  props: {
    /**
     * 结果页标题
     */
    promptTitle: {
      type: [String, Boolean]
    },

    /**
     * 主样式
     */
    className: {
      type: String
    },

    /**
     * 加载状态
     */
    loading: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style lang="less">
@formItemW: 280px;

.page-layout-main {
  display: flex;
  flex-flow: column;
  height: 100%;
  position: relative;
  // form表单
  .page-layout-search {
    background-color: #fff;
    margin-bottom: @gap / 2;
    padding: @gap @gap 0 @gap;

    .ant-form-inline {
      display: flex;
      flex-wrap: wrap;
    }

    .ant-form-item {
      display: flex;
      margin-bottom: 20px;
      margin-right: 20px;
      width: @formItemW;
    }

    .page-form-time {
      width: @formItemW * 2 + @gap;
    }

    .ant-form-item-label {
      display: inline-block;
      vertical-align: top;
      line-height: 36px;
    }

    @media (max-width: 575px) {
      .ant-form-item-label {
        width: auto !important;
        margin-right: 10px;
      }
    }

    .ant-form-item-control {
      line-height: 34px;
    }

    .ant-form-item-control-wrapper {
      flex: 1 1;
      display: inline-block;
      vertical-align: top;
    }

    .ant-select-selection-selected-value {
      max-width: 156px;
    }

    .page-search-btns {
      width: @formItemW;
    }

    .ant-btn {
      margin-bottom: @gap;
      min-width: (@formItemW / 2) - (@gap / 2);

      & + .ant-btn {
        margin-left: @gap;
      }
    }
  }

  // 内容布局
  .page-layout-flex {
    display: flex;

    .page-layout-cnt {
      flex: 1;
    }

    .page-layout-extend {
      position: relative;
    }

    .page-layout-extend + .page-layout-cnt {
      // margin-left: @gap;
    }
  }

  .page-layout-cnt {
    background-color: #fff;
    padding: @gap;
    min-height: 60vh;

    .page-status-tag {
      margin-right: 0;
      line-height: 16px;
      padding: 0 4px;
    }
  }

  .page-layout-prompt {
    display: flex;
    margin-top: -8px;
    margin-bottom: 10px;

    &--h {
      display: flex;
      align-items: center;
      height: 36px;
      font-size: 16px;
    }

    &--opt {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: flex-end;

      .ant-btn {
        margin-left: 12px;
      }
    }
  }

  .page-layout-table {
    .ant-table-column-title {
      font-weight: normal;
    }

    .ant-table-empty {
      .ant-empty-description {
        font-size: 12px;
      }
    }

    .page-table-btn {
      display: inline-block;
      color: @primary;
      font-size: 15px;
      cursor: pointer;

      &:hover {
        opacity: 0.8;
      }

      & + .page-table-btn {
        margin-left: 12px;
      }

      &--del {
        color: @red;
      }

      &--add {
        color: @green;
      }
    }
  }
}
</style>
